<template>
    <el-menu :default-active=data.active class="el-menu-vertical-demo" router>
        <el-menu-item @click="menuClick(item.path)" v-for="(item, index) in routeOption" :key="index" :index="item.path">
            <el-icon>
                <component :is="item.meta.icon"></component>
            </el-icon>
            <span>{{ item.meta.title }}</span>
        </el-menu-item>
    </el-menu>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter()
const routes = router.getRoutes()
const data = reactive({
    // active: router.currentRoute.value.fullPath //当前路径,刷新有bug
    active: window.location.hash.replace('#', '') //当前路径
})
const routeOption = routes
const menuClick = (path) => {
    data.active = path
}
</script>

<style scoped></style>